<script setup>
import { ref, onMounted, computed, nextTick, watch } from 'vue'
import { Tag, Empty, Spin, Button, message } from 'ant-design-vue'
import { HeartOutlined, StarOutlined, PlayCircleOutlined, MessageOutlined, UserOutlined, RobotOutlined, PlusOutlined, EditOutlined, ThunderboltOutlined } from '@ant-design/icons-vue'
import FilterSearch from '@/components/FilterSearch.vue'
import { useRouter, useRoute } from 'vue-router'
import { getRolePage } from '@/api/role'

// 推荐AI数据
const robots = ref([])
const loading = ref(true)
const backgroundLoading = ref(false) // 后台静默加载
const error = ref(null)
const retryCount = ref(0)
const maxRetries = 3

// 缓存机制
const cacheKey = 'officialRobots_cache'
const cacheTimeout = 5 * 60 * 1000 // 5分钟缓存

// 检查缓存是否有效
const getCachedData = () => {
  try {
    const cached = localStorage.getItem(cacheKey)
    if (cached) {
      const { data, timestamp } = JSON.parse(cached)
      if (Date.now() - timestamp < cacheTimeout) {
        console.log('📁 使用缓存数据')
        return data
      }
    }
  } catch (err) {
    console.warn('缓存数据解析失败:', err)
  }
  return null
}

// 保存数据到缓存
const setCachedData = (data) => {
  try {
    localStorage.setItem(cacheKey, JSON.stringify({
      data,
      timestamp: Date.now()
    }))
    console.log('📁 数据已缓存')
  } catch (err) {
    console.warn('缓存数据失败:', err)
  }
}

// 路由
const router = useRouter()
const route = useRoute()

// FilterSearch组件引用
const filterSearch = ref(null)

// 响应式检测
const isMobile = ref(false)
const checkScreenSize = () => {
  isMobile.value = window.innerWidth < 768
}

// 搜索和筛选状态
const currentFilters = ref({
  searchText: '',
  category: null,
  rating: null
})

// 监听路由变化，处理从主页传递过来的搜索参数
watch(() => route.query.search, (newSearch) => {
  if (newSearch) {
    console.log('从主页接收到搜索关键词:', newSearch)

    // 等待组件挂载完成后设置搜索文本
    nextTick(() => {
      // 更新内部筛选状态
      currentFilters.value.searchText = newSearch

      // 同步更新FilterSearch组件的搜索框显示
      if (filterSearch.value && filterSearch.value.setSearchText) {
        filterSearch.value.setSearchText(newSearch)
      }

      // 显示提示信息
      message.success(`正在搜索 "${newSearch}" 相关的AI角色`)
    })
  }
}, { immediate: true })

// 分类选项
const categoryOptions = ref([
  { label: '全部分类', value: null },
  { label: '助手工具', value: 'assistant' },
  { label: '创意写作', value: 'creative' },
  { label: '技术专家', value: 'technical' },
  { label: '心理咨询', value: 'psychology' },
  { label: '语言学习', value: 'language' },
  { label: '娱乐游戏', value: 'entertainment' }
])

// 评分选项
const ratingOptions = ref([
  { label: '全部评分', value: null },
  { label: '5星', value: 5 },
  { label: '4星以上', value: 4 },
  { label: '3星以上', value: 3 }
])

// 数据映射函数 - 将API数据转换为组件需要的格式
const mapApiDataToRobots = (apiRecords) => {
  return apiRecords.map(record => ({
    id: String(record.id), // 确保ID为字符串格式，避免大整数精度丢失
    name: record.name,
    description: record.description,
    avatar: record.avatar || 'https://lh.ithxs.com/apis.php?act=def&seed=' + Math.random(),
    category: getCategoryValue(record.category),
    rating: generateRating(), // 暂时生成随机评分，后续可从API获取
    users: generateUserCount(), // 暂时生成随机用户数，后续可从API获取
    tags: generateTags(record.category, record.description),
    isOfficial: record.isSystem === 1,
    featured: Math.random() > 0.7 // 30%的概率为精选
  }))
}

// 分类映射
const getCategoryValue = (categoryName) => {
  const categoryMap = {
    '技术': 'technical',
    '助手': 'assistant',
    '创意': 'creative',
    '心理': 'psychology',
    '语言': 'language',
    '娱乐': 'entertainment'
  }
  return categoryMap[categoryName] || 'assistant'
}

// 生成随机评分（4.0-5.0）
const generateRating = () => {
  return Math.round((Math.random() * 1 + 4) * 10) / 10
}

// 生成随机用户数（1000-20000）
const generateUserCount = () => {
  return Math.floor(Math.random() * 19000) + 1000
}

// 根据分类和描述生成标签
const generateTags = (category, description) => {
  const baseTags = {
    '技术': ['编程', '代码审查', '技术咨询'],
    '助手': ['智能问答', '生活助手', '高效办公'],
    '创意': ['创意写作', '文案策划', '设计灵感'],
    '心理': ['心理咨询', '情感支持', '压力管理'],
    '语言': ['语言学习', '口语练习', '翻译'],
    '娱乐': ['休闲娱乐', '游戏', '聊天']
  }

  let tags = baseTags[category] || ['AI助手', '智能对话']

  // 从描述中提取关键词作为标签
  if (description && description.includes('编程')) {
    tags = ['编程', '代码', '开发', ...tags.slice(0, 2)]
  }

  return tags.slice(0, 3)
}

// 备用模拟数据（API失败时使用）
const mockRobots = [
  {
    id: 1,
    name: 'AI助手Pro',
    description: '全能AI助手，帮助你解决日常问题，提供专业建议和信息查询服务。支持多语言对话，具备强大的逻辑推理能力。',
    avatar: 'https://lh.ithxs.com/apis.php?act=def&seed=1',
    category: 'assistant',
    rating: 4.8,
    users: 15420,
    tags: ['智能问答', '生活助手', '高效办公'],
    isOfficial: true,
    featured: true
  },
  {
    id: 2,
    name: '创意写作大师',
    description: '专业的写作助手，擅长各种文体创作。',
    avatar: 'https://lh.ithxs.com/apis.php?act=def&seed=2',
    category: 'creative',
    rating: 4.9,
    users: 8960,
    tags: ['创意写作', '文案策划', '诗歌创作'],
    isOfficial: true,
    featured: true
  },
  {
    id: 3,
    name: '编程专家',
    description: '资深程序员AI，精通多种编程语言，提供代码优化和技术咨询服务。可以帮助你解决复杂的算法问题，优化代码性能，进行架构设计，以及提供最佳实践建议。支持前端、后端、移动端开发。',
    avatar: 'https://lh.ithxs.com/apis.php?act=def&seed=3',
    category: 'technical',
    rating: 4.7,
    users: 12340,
    tags: ['编程', '代码审查', '技术咨询'],
    isOfficial: true,
    featured: false
  },
  {
    id: 4,
    name: '心理健康顾问',
    description: '专业心理咨询师，提供情感支持。',
    avatar: 'https://lh.ithxs.com/apis.php?act=def&seed=4',
    category: 'psychology',
    rating: 4.6,
    users: 6780,
    tags: ['心理咨询', '情感支持', '压力管理'],
    isOfficial: true,
    featured: false
  },
  {
    id: 5,
    name: '英语学习伙伴',
    description: '专业英语教学AI，提供口语练习、语法纠错和词汇学习服务。包含雅思、托福、商务英语等专项训练，支持发音评测和对话模拟。',
    avatar: 'https://lh.ithxs.com/apis.php?act=def&seed=5',
    category: 'language',
    rating: 4.5,
    users: 9820,
    tags: ['英语学习', '口语练习', '语法纠错'],
    isOfficial: false,
    featured: false
  },
  {
    id: 6,
    name: '数据分析师',
    description: '专业数据分析AI，帮助处理和解读各种数据。',
    avatar: 'https://lh.ithxs.com/apis.php?act=def&seed=6',
    category: 'technical',
    rating: 4.4,
    users: 5230,
    tags: ['数据分析', 'Excel', '可视化'],
    isOfficial: false,
    featured: false
  },
  {
    id: 7,
    name: '设计顾问',
    description: '创意设计助手，提供UI/UX设计建议、色彩搭配方案和视觉创意灵感。擅长品牌设计、网页设计、移动应用界面设计等多个领域。可以分析设计趋势，提供专业的审美指导和实用的设计技巧。',
    avatar: 'https://lh.ithxs.com/apis.php?act=def&seed=7',
    category: 'creative',
    rating: 4.8,
    users: 7890,
    tags: ['UI设计', '创意', '品牌'],
    isOfficial: true,
    featured: false
  },
  {
    id: 8,
    name: '健身教练',
    description: '个人健身指导，制定运动计划。',
    avatar: 'https://lh.ithxs.com/apis.php?act=def&seed=8',
    category: 'assistant',
    rating: 4.3,
    users: 4560,
    tags: ['健身', '运动', '健康'],
    isOfficial: false,
    featured: false
  }
]

// 筛选后的AI列表
const filteredRobots = computed(() => {
  let result = robots.value

  // 文本搜索
  if (currentFilters.value.searchText?.trim()) {
    const search = currentFilters.value.searchText.toLowerCase()
    result = result.filter(robot =>
      robot.name.toLowerCase().includes(search) ||
      robot.description.toLowerCase().includes(search) ||
      robot.tags.some(tag => tag.toLowerCase().includes(search))
    )
  }

  // 分类筛选
  if (currentFilters.value.category !== null) {
    result = result.filter(robot => robot.category === currentFilters.value.category)
  }

  // 评分筛选
  if (currentFilters.value.rating !== null) {
    result = result.filter(robot => robot.rating >= currentFilters.value.rating)
  }

  return result.sort((a, b) => {
    // 官方推荐优先，然后按评分排序
    if (a.featured !== b.featured) return b.featured - a.featured
    if (a.isOfficial !== b.isOfficial) return b.isOfficial - a.isOfficial
    return b.rating - a.rating
  })
})

// 处理筛选变化
const handleFilterChange = (filters) => {
  currentFilters.value = filters
}

// 处理AI选择
const handleRobotSelect = (robot) => {
  console.log('选择AI:', robot.name, 'ID:', robot.id, 'ID类型:', typeof robot.id)
  // 跳转到聊天页面，传递roleId参数
  router.push(`/chat?roleId=${robot.id}`)
}

// 跳转到创建AI角色页面
const navigateToCreateRole = () => {
  router.push('/roles/create')
}

// 检查是否有搜索条件
const hasSearchConditions = computed(() => {
  return currentFilters.value.searchText?.trim() ||
         currentFilters.value.category !== null ||
         currentFilters.value.rating !== null
})

// 瀑布流布局函数
const initMasonryLayout = () => {
  if (isMobile.value) return // 移动端不需要瀑布流

  nextTick(() => {
    const grid = document.querySelector('.robots-grid-modern')
    if (!grid) return

    // 计算合适的列数和间距
    const gridWidth = grid.offsetWidth
    const baseCardWidth = window.innerWidth >= 1600 ? 280 :
                         window.innerWidth >= 1200 ? 260 : 240
    const gap = window.innerWidth >= 1600 ? 20 :
               window.innerWidth >= 1200 ? 16 : 14

    let columns = Math.floor((gridWidth + gap) / (baseCardWidth + gap))

    // 响应式列数限制，实现凌乱效果
    if (window.innerWidth >= 1600) {
      columns = Math.max(3, Math.min(columns, 6)) // 大屏最多6列
    } else if (window.innerWidth >= 1200) {
      columns = Math.max(3, Math.min(columns, 5)) // 中大屏最多5列
    } else if (window.innerWidth >= 768) {
      columns = Math.min(columns, 3) // 中屏最多3列
    } else {
      columns = 1 // 小屏1列
    }

    // 应用多列布局
    grid.style.columnCount = columns.toString()
    grid.style.columnGap = `${gap}px`
    grid.style.columnFill = 'balance'

    console.log(`应用瀑布流布局: ${columns}列, 间距: ${gap}px`)
  })
}

// 加载推荐AI数据
const loadRobotsData = async (useCache = true, isRetry = false, isBackground = false) => {
  try {
    // 根据情况设置加载状态
    if (isBackground) {
      backgroundLoading.value = true
    } else if (!isRetry) {
      loading.value = true
    }
    error.value = null

    // 先检查缓存
    if (useCache) {
      const cachedData = getCachedData()
      if (cachedData && cachedData.length > 0) {
        robots.value = cachedData
        loading.value = false
        setTimeout(() => initMasonryLayout(), 50)
        return
      }
    }

    console.log('🚀 开始加载推荐AI数据...')

    // 调用API获取角色分页数据（不传递任何参数）
    const response = await getRolePage()

    if (response.success && response.data?.records) {
      // 将API数据映射为组件所需格式
      const robotsData = mapApiDataToRobots(response.data.records)
      robots.value = robotsData

      // 缓存数据
      setCachedData(robotsData)

      // 重置重试计数
      retryCount.value = 0

      console.log('✅ 成功加载推荐AI数据:', robots.value.length, '个角色')
    } else {
      throw new Error('API响应格式错误')
    }
  } catch (err) {
    console.error('❌ 加载推荐AI数据失败:', err)

    // 自动重试机制
    if (retryCount.value < maxRetries && !isRetry) {
      retryCount.value++
      console.log(`🔄 自动重试 (${retryCount.value}/${maxRetries})...`)

      // 等待一段时间后重试
      setTimeout(() => {
        loadRobotsData(false, true)
      }, 1000 * retryCount.value)

      return
    }

    error.value = err.message || '加载失败'

    // 检查是否有缓存数据可用（即使过期）
    const cachedData = getCachedData()
    if (cachedData && cachedData.length > 0) {
      robots.value = cachedData
      message.warning('网络连接不稳定，显示缓存数据')
    } else {
      // 最后才使用备用模拟数据
      robots.value = mockRobots
      message.error('加载失败，显示示例数据')
    }
  } finally {
    loading.value = false
    backgroundLoading.value = false
    // 初始化瀑布流布局
    setTimeout(() => initMasonryLayout(), 100)
  }
}

// 手动重试函数
const manualRetry = () => {
  retryCount.value = 0
  loadRobotsData(false, false)
}

// 预加载缓存数据
const preloadCachedData = () => {
  const cachedData = getCachedData()
  if (cachedData && cachedData.length > 0) {
    robots.value = cachedData
    loading.value = false
    console.log('🚀 预加载缓存数据:', cachedData.length, '个角色')
    return true
  }
  return false
}

// 立即尝试预加载数据
const hasPreloaded = preloadCachedData()

// 组件挂载后加载数据
onMounted(() => {
  // 检测屏幕尺寸并添加监听器
  checkScreenSize()
  window.addEventListener('resize', () => {
    checkScreenSize()
    // 响应式重新布局
    if (!loading.value && robots.value.length > 0) {
      setTimeout(() => initMasonryLayout(), 100)
    }
  })

  // 如果没有预加载到缓存数据，或者需要刷新数据
  if (!hasPreloaded) {
    // 延迟加载以避免阻塞页面渲染
    setTimeout(() => {
      loadRobotsData()
    }, 100)
  } else {
    // 有缓存数据时，在后台静默更新
    setTimeout(() => {
      loadRobotsData(false, false, true)
    }, 1000)
  }

  // 初始化布局
  setTimeout(() => initMasonryLayout(), 200)
})
</script>

<template>
  <div class="page-container">

    <!-- 搜索和筛选区域 -->
    <FilterSearch
      ref="filterSearch"
      search-placeholder="搜索AI名称、描述或功能标签..."
      :category-options="categoryOptions"
      :rating-options="ratingOptions"
      @filter-change="handleFilterChange"
    />

    <!-- AI列表 -->
    <div class="robots-section">
      <!-- 后台更新提示 -->
      <div v-if="backgroundLoading && robots.length > 0" class="background-loading-hint">
        <Spin size="small" />
        <span>正在更新数据...</span>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading && robots.length === 0" class="loading-placeholder">
        <Spin size="large" />
        <div class="loading-text">
          {{ retryCount > 0 ? `重试中 (${retryCount}/${maxRetries})...` : '正在加载推荐AI...' }}
        </div>
        <div v-if="retryCount > 0" class="loading-retry-hint">
          网络连接较慢，请稍候...
        </div>
      </div>

      <!-- 骨架屏 - 首次加载且没有重试时显示 -->
      <div v-else-if="loading && robots.length === 0 && retryCount === 0" class="skeleton-container">
        <div v-if="!isMobile" class="skeleton-grid">
          <div v-for="n in 6" :key="n" class="skeleton-card">
            <div class="skeleton-header"></div>
            <div class="skeleton-avatar"></div>
            <div class="skeleton-content">
              <div class="skeleton-title"></div>
              <div class="skeleton-desc line1"></div>
              <div class="skeleton-desc line2"></div>
              <div class="skeleton-tags">
                <div class="skeleton-tag"></div>
                <div class="skeleton-tag"></div>
              </div>
              <div class="skeleton-button"></div>
            </div>
          </div>
        </div>
        <div v-else class="skeleton-list">
          <div v-for="n in 4" :key="n" class="skeleton-item">
            <div class="skeleton-avatar-small"></div>
            <div class="skeleton-info">
              <div class="skeleton-name"></div>
              <div class="skeleton-preview"></div>
            </div>
            <div class="skeleton-right">
              <div class="skeleton-rating"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error && robots.length === 0" class="error-placeholder">
        <div class="error-icon">⚠️</div>
        <div class="error-title">加载失败</div>
        <div class="error-desc">{{ error }}</div>
        <div class="error-tips">
          <p>可能的原因：</p>
          <ul>
            <li>网络连接不稳定</li>
            <li>服务器响应超时</li>
            <li>API服务暂时不可用</li>
          </ul>
        </div>
        <div class="error-actions">
          <Button type="primary" @click="manualRetry" class="retry-btn" :loading="loading">
            {{ loading ? '重试中...' : '重试' }}
          </Button>
          <Button @click="() => loadRobotsData(false, false)" class="refresh-btn">
            强制刷新
          </Button>
        </div>
      </div>

      <!-- AI网格 - 桌面端现代卡片 -->
      <div v-else-if="filteredRobots.length > 0 && !isMobile" class="robots-grid-modern">
        <div
          v-for="robot in filteredRobots"
          :key="robot.id"
          class="robot-card-modern"
          :class="{ 'featured': robot.featured }"
          @click="handleRobotSelect(robot)"
        >
          <!-- 卡片头部背景区域 -->
          <div class="card-header-bg">
            <img
              :src="`https://picsum.photos/300/80?random=${robot.id}`"
              :alt="robot.name"
              class="background-image"
            />
            <div class="header-overlay"></div>
            <!-- 右上角特色标识或菜单 -->
            <div class="header-badge" v-if="robot.featured">
              <StarOutlined />
            </div>
            <div class="header-official" v-else-if="robot.isOfficial">
              官方
            </div>
          </div>

          <!-- 大圆形头像 -->
          <div class="robot-avatar-large">
            <img :src="robot.avatar" :alt="robot.name" />
          </div>

          <!-- 卡片内容区域 -->
          <div class="card-content">
            <h3 class="robot-title-modern">{{ robot.name }}</h3>
            <p class="robot-description-modern">{{ robot.description }}</p>

            <!-- 评分和用户数 -->
            <div class="robot-stats-compact">
              <div class="stat-rating">
                <StarOutlined />
                <span>{{ robot.rating }}</span>
              </div>
              <div class="stat-users">
                <UserOutlined />
                <span>{{ (robot.users / 1000).toFixed(1) }}k</span>
              </div>
            </div>

            <!-- 标签 -->
            <div class="robot-tags-compact">
              <span
                v-for="tag in robot.tags.slice(0, 2)"
                :key="tag"
                class="robot-tag-compact"
              >
                {{ tag }}
              </span>
              <span v-if="robot.tags.length > 2" class="more-tags-compact">
                +{{ robot.tags.length - 2 }}
              </span>
            </div>

            <!-- 操作按钮 -->
            <div class="card-actions-compact">
              <button class="action-btn-primary-compact" @click.stop="handleRobotSelect(robot)">
                <PlayCircleOutlined />
                开始对话
              </button>
              <button class="action-btn-secondary-compact">
                收藏
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- AI列表 - 移动端 -->
      <div v-else-if="filteredRobots.length > 0 && isMobile" class="robots-list-mobile">
        <div
          v-for="robot in filteredRobots"
          :key="robot.id"
          class="robot-item-mobile"
          :class="{ 'featured': robot.featured }"
          @click="handleRobotSelect(robot)"
        >
          <!-- 特色标识 -->
          <div v-if="robot.featured" class="featured-badge-mobile">
            <StarOutlined /> 精选
          </div>

          <div class="robot-content-mobile">
            <!-- 左侧头像和状态 -->
            <div class="robot-left">
              <div class="robot-avatar-mobile">
                <img :src="robot.avatar" :alt="robot.name" />
                <div class="official-badge-mobile" v-if="robot.isOfficial">官方</div>
              </div>
              <div class="robot-status">
                <div class="status-dot"></div>
                <span>在线</span>
              </div>
            </div>

            <!-- 中间信息 -->
            <div class="robot-middle">
              <div class="robot-name-mobile">{{ robot.name }}</div>
              <div class="robot-preview">{{ robot.description.substring(0, 30) }}...</div>
              <div class="robot-tags-mobile">
                <span
                  v-for="tag in robot.tags.slice(0, 2)"
                  :key="tag"
                  class="robot-tag-mobile"
                >
                  {{ tag }}
                </span>
              </div>
            </div>

            <!-- 右侧统计和操作 -->
            <div class="robot-right">
              <div class="robot-stats-mobile">
                <div class="rating-mobile">
                  <StarOutlined />
                  <span>{{ robot.rating }}</span>
                </div>
                <div class="users-mobile">
                  {{ (robot.users / 1000).toFixed(0) }}k人在用
                </div>
              </div>
              <div class="chat-icon">
                <MessageOutlined />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 - 引导用户创建AI角色 -->
      <div v-else class="empty-state-container">
        <!-- 有搜索条件但无结果 -->
        <div v-if="hasSearchConditions" class="no-results-state">
          <div class="empty-content">
            <div class="empty-icon-large">🔍</div>
            <h3 class="empty-title">没有找到匹配的AI角色</h3>
            <p class="empty-desc">
              没有找到符合"{{ currentFilters.searchText }}"的AI角色
            </p>
          </div>

          <!-- 创建AI角色引导 -->
          <div class="create-role-guide">
            <div class="guide-content">
              <div class="guide-icon">
                <ThunderboltOutlined />
              </div>
              <div class="guide-text">
                <h4>为什么不创建一个专属的AI角色？</h4>
                <p>根据您的需求，量身定制一个完美的AI助手</p>
              </div>
            </div>

            <div class="guide-actions">
              <Button
                type="primary"
                size="large"
                class="create-btn"
                @click="navigateToCreateRole"
              >
                <PlusOutlined />
                立即创建AI角色
              </Button>
              <Button
                size="large"
                class="clear-filter-btn"
                @click="$refs.filterSearch?.clearFilters()"
              >
                清除筛选条件
              </Button>
            </div>
          </div>
        </div>

        <!-- 无搜索条件的空状态 -->
        <div v-else class="welcome-state">
          <div class="welcome-content">
            <div class="welcome-icon">🤖</div>
            <h3 class="welcome-title">探索AI的无限可能</h3>
            <p class="welcome-desc">暂无推荐AI，但您可以创建专属的AI角色来开始对话</p>
          </div>

          <div class="welcome-features">
            <div class="feature-item">
              <div class="feature-icon">
                <EditOutlined />
              </div>
              <h5>个性化定制</h5>
              <p>设定角色性格、专业领域和对话风格</p>
            </div>
            <div class="feature-item">
              <div class="feature-icon">
                <MessageOutlined />
              </div>
              <h5>智能对话</h5>
              <p>享受流畅自然的AI对话体验</p>
            </div>
            <div class="feature-item">
              <div class="feature-icon">
                <StarOutlined />
              </div>
              <h5>持续优化</h5>
              <p>根据使用反馈不断完善AI能力</p>
            </div>
          </div>

          <div class="welcome-action">
            <Button
              type="primary"
              size="large"
              class="create-btn-large"
              @click="navigateToCreateRole"
            >
              <PlusOutlined />
              开始创建您的AI角色
            </Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 为标签生成颜色的辅助函数
export default {
  methods: {
    getTagColor(tag) {
      const colors = ['blue', 'green', 'orange', 'red', 'purple', 'cyan', 'magenta']
      const hash = tag.split('').reduce((a, b) => {
        a = ((a << 5) - a) + b.charCodeAt(0)
        return a & a
      }, 0)
      return colors[Math.abs(hash) % colors.length]
    }
  }
}
</script>

<style lang="scss" scoped>
// 页面特定样式，支持桌面端卡片和移动端列表展示

.robots-section {
  min-height: 400px;
}

/* ==================== 桌面端卡片样式 ==================== */
.robots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* ==================== 现代卡片设计样式 ==================== */
.robots-grid-modern {
  // 初始使用多列布局实现瀑布流
  column-count: auto;
  column-width: 260px; // 缩小卡片宽度以显示更多
  column-gap: 16px;
  column-fill: balance;

  // 响应式列数控制
  @media (min-width: 1600px) {
    column-width: 280px;
    column-gap: 20px;
  }

  @media (min-width: 1200px) and (max-width: 1599px) {
    column-width: 260px;
    column-gap: 16px;
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    column-count: 2;
    column-width: auto;
    column-gap: 14px;
  }

  @media (max-width: 767px) {
    column-count: 1;
    column-gap: 0;
  }
}

.robot-card-modern {
  background: #ffffff;
  border-radius: 16px; // 稍小的圆角
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  break-inside: avoid;
  margin-bottom: 16px;
  display: inline-block;
  width: 100%;

  // 动态高度，根据内容调整
  min-height: 240px; // 缩小最小高度

  &:hover {
    transform: translateY(-6px);
    box-shadow:
      0 16px 48px rgba(102, 126, 234, 0.12),
      0 6px 24px rgba(0, 0, 0, 0.08);
  }

  // 精选卡片特殊样式
  &.featured {
    border: 2px solid rgba(102, 126, 234, 0.3);
    box-shadow:
      0 8px 32px rgba(102, 126, 234, 0.15),
      0 4px 16px rgba(0, 0, 0, 0.06);

    &:hover {
      border-color: rgba(102, 126, 234, 0.5);
      box-shadow:
        0 20px 60px rgba(102, 126, 234, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.1);
    }
  }
}

/* 卡片头部背景区域 */
.card-header-bg {
  position: relative;
  height: 80px; // 缩小高度
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: all 0.3s ease;

  .robot-card-modern:hover & {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(102, 126, 234, 0.4) 0%,
    rgba(118, 75, 162, 0.4) 100%);
  backdrop-filter: blur(1px);
}

/* 右上角标识 */
.header-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #ffffff;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.header-official {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 大圆形头像 */
.robot-avatar-large {
  position: absolute;
  left: 16px;
  top: 40px; // 调整位置
  width: 60px; // 缩小尺寸
  height: 60px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 5;
  background: #ffffff;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .robot-card-modern:hover & img {
    transform: scale(1.1);
  }
}

/* 卡片内容区域 */
.card-content {
  padding: 35px 16px 16px 16px; // 缩小padding
  display: flex;
  flex-direction: column;
  gap: 8px; // 缩小间距
}

.robot-title-modern {
  font-size: 15px; // 缩小字体
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.robot-description-modern {
  font-size: 12px; // 缩小字体
  color: #6b7280;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* 统计信息 */
.robot-stats-compact {
  display: flex;
  gap: 12px;
  margin: 6px 0;
}

.stat-rating, .stat-users {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #6b7280;
  background: rgba(156, 163, 175, 0.1);
  padding: 3px 6px;
  border-radius: 8px;

  .anticon {
    font-size: 11px;
  }
}

.stat-rating {
  color: #f59e0b;
}

/* 标签 */
.robot-tags-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 4px;
}

.robot-tag-compact {
  font-size: 9px; // 缩小字体
  padding: 2px 6px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.08) 100%);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.15);
  font-weight: 500;
}

.more-tags-compact {
  font-size: 9px;
  color: #9ca3af;
  margin-left: 2px;
}

/* 操作按钮 */
.card-actions-compact {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.action-btn-primary-compact {
  flex: 1;
  height: 28px; // 缩小高度
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: #ffffff;
  font-weight: 500;
  font-size: 11px; // 缩小字体
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
  }

  .anticon {
    font-size: 11px;
  }
}

.action-btn-secondary-compact {
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(102, 126, 234, 0.2);
  color: #667eea;
  font-weight: 500;
  font-size: 11px;
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateY(-1px);
  }
}

.robot-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(102, 126, 234, 0.5);
  }

  &.featured {
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
  }
}

.featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
}

.robot-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.robot-avatar {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.official-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #1890ff;
  color: white;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
}

.robot-basic {
  flex: 1;
}

.robot-name {
  font-size: 16px;
  font-weight: 600;
  color: #eaeaea;
  margin: 0 0 8px 0;
}

.robot-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.rating, .users {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rating {
  color: #faad14;
  font-weight: 500;
}

.star-icon {
  font-size: 12px;
}

.users {
  color: #e5e5e2;
}

.user-icon {
  font-size: 12px;
}

.robot-description {
  font-size: 14px;
  color: #e5e5e2;
  line-height: 1.4;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.robot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.robot-tag {
  background: rgba(102, 126, 234, 0.1) !important;
  color: #f3f3f3 !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
  font-size: 12px;
  border-radius: 12px;
  margin-right: 0;
  backdrop-filter: blur(4px);
}

.robot-action {
  width: 100%;
}

.start-chat-btn {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  }
}

/* ==================== 移动端列表样式 ==================== */
.robots-list-mobile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.robot-item-mobile {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(102, 126, 234, 0.5);
  }

  // 精选AI特殊样式 - 磨砂玻璃效果
  &.featured {
    background: linear-gradient(135deg,
      rgba(102, 126, 234, 0.15) 0%,
      rgba(118, 75, 162, 0.12) 50%,
      rgba(255, 255, 255, 0.18) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow:
      0 8px 32px rgba(102, 126, 234, 0.12),
      0 4px 16px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;

    // 内部发光效果
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(102, 126, 234, 0.05) 50%,
        rgba(118, 75, 162, 0.03) 100%);
      border-radius: inherit;
      pointer-events: none;
      z-index: 1;
    }

    // 确保内容在发光层之上
    > * {
      position: relative;
      z-index: 2;
    }

    // 增强文字对比度 - 使用白色主题
    .robot-name-mobile {
      color: #ffffff;
      font-weight: 700;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
      letter-spacing: -0.02em;
    }

    .robot-preview {
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .robot-tag-mobile {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(10px);
      color: #ffffff;
      font-weight: 600;
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .robot-stats-mobile {
      .rating-mobile {
        color: #fbbf24;
        font-weight: 600;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }

      .users-mobile {
        color: rgba(255, 255, 255, 0.8);
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      }
    }

    .robot-status {
      color: #4ade80;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

      .status-dot {
        box-shadow: 0 0 10px rgba(74, 222, 128, 0.8), 0 1px 3px rgba(0, 0, 0, 0.3);
      }
    }

    .chat-icon {
      color: rgba(255, 255, 255, 0.95);
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

    // Hover效果增强
    &:hover {
      background: linear-gradient(135deg,
        rgba(102, 126, 234, 0.20) 0%,
        rgba(118, 75, 162, 0.16) 50%,
        rgba(255, 255, 255, 0.22) 100%);
      border-color: rgba(102, 126, 234, 0.4);
      box-shadow:
        0 12px 48px rgba(102, 126, 234, 0.18),
        0 6px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
      transform: translateY(-2px) scale(1.01);

      &::before {
        background: linear-gradient(135deg,
          rgba(255, 255, 255, 0.15) 0%,
          rgba(102, 126, 234, 0.08) 50%,
          rgba(118, 75, 162, 0.05) 100%);
      }

      .chat-icon {
        color: #ffffff;
        transform: scale(1.2);
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
      }

      .robot-tag-mobile {
        background: rgba(255, 255, 255, 0.35);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

.featured-badge-mobile {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 2px;
}

.robot-content-mobile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.robot-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.robot-avatar-mobile {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.official-badge-mobile {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #1890ff;
  color: white;
  padding: 1px 3px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 500;
}

.robot-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #4ade80;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.robot-middle {
  flex: 1;
  min-width: 0;
}

.robot-name-mobile {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.robot-preview {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 6px;
  line-height: 1.4;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: color 0.3s ease;
}

.robot-tags-mobile {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.robot-tag-mobile {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.robot-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.robot-stats-mobile {
  text-align: right;
}

.rating-mobile {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.users-mobile {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.chat-icon {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
}

.robot-item-mobile:hover {
  .chat-icon {
    transform: scale(1.1);
    color: #ffffff;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
  }

  .robot-name-mobile {
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  .robot-preview {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  .robot-tag-mobile {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

// 加载状态样式
.loading-placeholder {
  text-align: center;
  padding: 80px 20px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.loading-text {
  color: #4a4a4a;
  font-size: 16px;
  margin-top: 16px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.loading-retry-hint {
  color: #999;
  font-size: 14px;
  margin-top: 8px;
  font-style: italic;
}

// 后台加载提示
.background-loading-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 8px 16px;
  margin-bottom: 16px;
  background: rgba(24, 144, 255, 0.1);
  border: 1px solid rgba(24, 144, 255, 0.2);
  border-radius: 8px;
  color: #1890ff;
  font-size: 14px;
  font-weight: 500;
}

// 骨架屏样式
.skeleton-container {
  padding: 20px 0;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;

  @media (min-width: 1600px) {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
}

.skeleton-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: 280px;
}

.skeleton-header {
  height: 80px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s infinite;
}

.skeleton-avatar {
  position: absolute;
  left: 16px;
  top: 40px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.15) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s infinite;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.skeleton-content {
  padding: 35px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-title {
  height: 20px;
  width: 70%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.15) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s infinite;
  border-radius: 4px;
}

.skeleton-desc {
  height: 14px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s infinite;
  border-radius: 4px;

  &.line1 {
    width: 100%;
  }

  &.line2 {
    width: 80%;
  }
}

.skeleton-tags {
  display: flex;
  gap: 4px;
  margin: 8px 0;
}

.skeleton-tag {
  height: 24px;
  width: 60px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s infinite;
  border-radius: 12px;
}

.skeleton-button {
  height: 28px;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.15) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s infinite;
  border-radius: 10px;
  margin-top: 8px;
}

// 移动端骨架屏
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.skeleton-avatar-small {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.15) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s infinite;
  flex-shrink: 0;
}

.skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-name {
  height: 16px;
  width: 60%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.15) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s infinite;
  border-radius: 4px;
}

.skeleton-preview {
  height: 12px;
  width: 80%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s infinite;
  border-radius: 4px;
}

.skeleton-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.skeleton-rating {
  height: 14px;
  width: 40px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.15) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s infinite;
  border-radius: 4px;
}

// 骨架屏动画
@keyframes skeleton-wave {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

// 错误状态样式
.error-placeholder {
  text-align: center;
  padding: 80px 20px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.error-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.error-title {
  font-size: 24px;
  font-weight: 600;
  color: #e74c3c;
  margin: 0 0 12px 0;
}

.error-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.error-tips {
  text-align: left;
  max-width: 400px;
  margin: 16px auto 24px auto;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);

  p {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #555;
  }

  ul {
    margin: 0;
    padding-left: 20px;

    li {
      margin: 4px 0;
      color: #666;
      font-size: 14px;
    }
  }
}

.error-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.retry-btn, .refresh-btn {
  border-radius: 12px;
  font-weight: 500;
  height: 44px;
  padding: 0 24px;
  transition: all 0.3s ease;
}

.refresh-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #666;

  &:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: #333;
    transform: translateY(-1px);
  }
}

/* ==================== 空状态样式 ==================== */
.empty-state-container {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* 搜索无结果状态 */
.no-results-state {
  text-align: center;
  max-width: 600px;
  width: 100%;
}

.empty-content {
  margin-bottom: 40px;
}

.empty-icon-large {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c2c2c;
  margin: 0 0 12px 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.empty-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

/* 创建角色引导 */
.create-role-guide {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.guide-content {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  text-align: left;
}

.guide-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  flex-shrink: 0;
}

.guide-text h4 {
  font-size: 18px;
  font-weight: 600;
  color: #2c2c2c;
  margin: 0 0 8px 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.guide-text p {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.guide-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.create-btn, .clear-filter-btn {
  border-radius: 12px;
  font-weight: 500;
  height: 44px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.create-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  }
}

.clear-filter-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #666;

  &:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: #333;
  }
}

/* 欢迎状态 */
.welcome-state {
  text-align: center;
  max-width: 800px;
  width: 100%;
}

.welcome-content {
  margin-bottom: 48px;
}

.welcome-icon {
  font-size: 80px;
  margin-bottom: 20px;
  opacity: 0.8;
}

.welcome-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c2c2c;
  margin: 0 0 16px 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.welcome-desc {
  font-size: 18px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.welcome-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.feature-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
  }
}

.feature-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  margin: 0 auto 16px auto;
}

.feature-item h5 {
  font-size: 16px;
  font-weight: 600;
  color: #2c2c2c;
  margin: 0 0 8px 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.feature-item p {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin: 0;
}

.welcome-action {
  display: flex;
  justify-content: center;
}

.create-btn-large {
  height: 56px;
  padding: 0 32px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
  }

  &:active {
    transform: translateY(-1px);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .robots-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }

  .loading-placeholder,
  .error-placeholder {
    padding: 60px 16px;
    min-height: 300px;
  }

  .error-icon {
    font-size: 48px;
  }

  .error-title {
    font-size: 20px;
  }

  .error-desc {
    font-size: 14px;
  }

  /* 移动端空状态样式调整 */
  .empty-state-container {
    min-height: 400px;
    padding: 20px 16px;
  }

  .welcome-features {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }

  .welcome-title {
    font-size: 24px;
  }

  .welcome-desc {
    font-size: 16px;
  }

  .create-btn-large {
    height: 48px;
    font-size: 16px;
    padding: 0 24px;
  }

  .guide-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .guide-actions {
    flex-direction: column;
    gap: 8px;
  }

  .create-btn, .clear-filter-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .robots-list-mobile {
    gap: 8px;
  }

  .robot-item-mobile {
    padding: 10px;
  }

  .loading-placeholder,
  .error-placeholder {
    padding: 40px 12px;
    min-height: 250px;
  }

  .error-icon {
    font-size: 40px;
  }

  .error-title {
    font-size: 18px;
  }

  .error-desc {
    font-size: 13px;
  }

  /* 小屏幕空状态优化 */
  .empty-state-container {
    min-height: 350px;
    padding: 16px 12px;
  }

  .welcome-icon {
    font-size: 64px;
  }

  .empty-icon-large {
    font-size: 48px;
  }

  .welcome-title, .empty-title {
    font-size: 20px;
  }

  .welcome-desc, .empty-desc {
    font-size: 14px;
  }

  .feature-item {
    padding: 16px;
  }

  .feature-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .create-role-guide {
    padding: 16px;
  }

  .guide-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .guide-text h4 {
    font-size: 16px;
  }

  .guide-text p {
    font-size: 13px;
  }
}
</style>